<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'代表项目'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
        <div class="analyItem" v-if="flg==1">
            <p class="analyItemTit tx-center" :class="(stageInfo.represent_acreage === undefined || stageInfo.represent_acreage === '' || stageInfo.represent_acreage === null) ||
                    (stageInfo.represent_type === undefined || stageInfo.represent_type === '' || stageInfo.represent_type === null) ||
                    (stageInfo.represent_cost === undefined || stageInfo.represent_cost === '' || stageInfo.represent_cost === null) ||
                    (stageInfo.represent_address === undefined || stageInfo.represent_address === '' || stageInfo.represent_address === null) ||
                    (stageInfo.represent_indeed === undefined || stageInfo.represent_indeed === '' || stageInfo.represent_indeed === null) ? '' : 'analyLightGreen'">案例</p>
            <div class="analyItemCon">
                     <p class="col-md-4">
                        <span class="cLightGray pr8">面积 </span>
                        <span>{{this.stageInfo.represent_acreage ? this.stageInfo.represent_acreage : ''}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">类型 </span>
                        <span>{{this.stageInfo.represent_type ? this.stageInfo.represent_type : ''}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">预算 </span>
                        <span>{{this.stageInfo.represent_cost ? this.stageInfo.represent_cost : ''}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">地址 </span>
                        <span>{{this.stageInfo.represent_address ? this.stageInfo.represent_address : ''}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">实地考察 </span>
                        <span>{{this.stageInfo.represent_indeed === 0 ? '是' : '否'}}</span>
                    </p>
                    <!-- <p class="col-md-4">
                        <span class="cLightGray pr8">照片 </span>
                        <span>{{this.stageInfo.represent_acreage}}</span>
                    </p> -->
                    <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=0">
                    </div>

            </div>
        </div>
        <div class="analyItem" v-if="flg==0">
            <p class="analyItemTit tx-center">案例</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">面积</span>
                    <input type="text" class="evaluateStandard" name="set_stage_info_represent_acreage" style="width: 46px;" v-model="represent_acreage"> 平米
                </p>
               <p class="col-md-4">
                    <span class="cLightGray pr8">类型</span>
                    <input type="text" class="evaluateStandard" name="set_stage_info_represent_type" style="width: 74px;" v-model="represent_type">
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">预算</span>
                    <input type="text" class="evaluateStandard" name="set_stage_info_represent_cost" style="width: 46px;" v-model="represent_cost"> 万
                </p>
                <p class="col-md-8" style="padding-top: 10px;">
                    <span class="cLightGray pr8">地址</span>
                    <input type="text" class="evaluateStandard" name="set_stage_info_represent_address" style="width: 300px;" v-model="address">
                </p>
                <p class="col-md-4" style="padding-top: 10px;">
                    <span class="cLightGray pr8">实地考察</span>
                    <select name="set_stage_info_represent_indeed" class="width80" v-model="represent_indeed">
                        <option value="0">是</option>
                        <option value="1">否</option>
                    </select>
                </p>
                </div>
            <div class="imgbox imgbox2 " style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updateStageInfoByleId()">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
            </div>
        </div>
    <!-- </div> -->
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="this.representAcreageList.length === 0 ? '' : 'analyLightGreen'">照片</p>
            <div class="analyItemCon">
                <div class="col-md-6">
                    <!-- 照片 -->
                    <span v-if="this.representAcreageList.length === 0" class="cLightGray col-md-4">案例照片</span>
                    <span  class="col-md-8">
                    <rx-upload v-if="photoFlg==1 && this.representAcreageList.length === 0" :data="{id: 11,attrModelid:51}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                    <rx-viewer v-else :images="representAcreageList" class="fl">
                        <div class="clearfix">
                            <div v-for="(item, index) of representAcreageList" :key="index" class="fl mr10 look_imgHover fl relative tx-center"  style="width:78px;height:78px;">
                                <img :src="item.url | smallImg(80, 80)" :alt="index">
                                <div class="upload_finish_div">
                                <div class="upload_finish_bg"></div>
                                <div class="upload_finish_linksm">
                                    <div class="dis-il-block">
                                        <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item.url"></a>
                                        <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(item.attrInfoId)"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="imgInfo tx-center">案例</div>
                              <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                            </div>
                        </div>
                    </rx-viewer>
                    </span>
                </div>
            </div>
        </div>
    </div>
            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl">
                    <span v-if="(this.representAcreageList.length === 0 ||
                    (stageInfo.represent_acreage === undefined || stageInfo.represent_acreage === '' || stageInfo.represent_acreage === null) ||
                    (stageInfo.represent_type === undefined || stageInfo.represent_type === '' || stageInfo.represent_type === null) ||
                    (stageInfo.represent_cost === undefined || stageInfo.represent_cost === '' || stageInfo.represent_cost === null) ||
                    (stageInfo.represent_address === undefined || stageInfo.represent_address === '' || stageInfo.represent_address === null) ||
                    (stageInfo.represent_indeed === undefined || stageInfo.represent_indeed === '' || stageInfo.represent_indeed === null))" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
        </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { updateStageInfoByleId, savePhotoByUid, findPhotoByUid, delPhotoByUid } from '../../Resources/Api/index'
export default {
    data () {
        return {
            photoFlg: 1,
            represent_acreage: 0, // 面积
            represent_type: '', // 类型
            represent_cost: 0, // 造价
            address: '', // 地址
            represent_indeed: 0, // 实地考察：0-是，1-否
            representAcreageList: [], // 代表项目照片
            flg: 1,
            stageInfo: {} // 用户的信息
        }
    },
    created () {
        this.stageInfo = this.$route.query.stageInfo
        this.represent_acreage = this.stageInfo.represent_acreage
        this.represent_type = this.stageInfo.represent_type
        this.represent_cost = this.stageInfo.represent_cost
        this.address = this.stageInfo.represent_address
        this.represent_indeed = this.stageInfo.represent_indeed
        this.findPhotoByUid()
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        delImg (value) {
            delPhotoByUid({
                attrInfoId: value
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    // this.findPhotoByUid()
                    // this.setUpdatePlate()
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('删除指定照片失败' + err)
            })
        },
        // 考察阶段修改用户的代表项目的面积，类型，造价，地址，实地考察
        updateStageInfoByleId () {
            if (this.represent_acreage === null || this.represent_acreage === '') {
                layer.msg('请输入面积')
                return
            }
            if (this.represent_type === null || this.represent_type === '') {
                layer.msg('请输入类型')
                return
            }
            if (this.represent_cost === null || this.represent_cost === '') {
                layer.msg('请输入造价')
                return
            }
            if (this.address === null || this.address === '') {
                layer.msg('请输入地址')
                return
            }
            updateStageInfoByleId({
                uid: this.leftInfo.uid, // 用户id
                representAcreage: this.represent_acreage, // 面积
                representType: this.represent_type, // 类型
                representCost: this.represent_cost, // 造价
                representAddress: this.address, // 地址
                representIndeed: this.represent_indeed // 实地考察，0-是，1-否
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('修改成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('考察阶段修改用户的代表项目的面积，类型，造价，地址，实地考察失败，异常信息：' + err)
            })
        },
        // 代表项目照片上传
        successUpload (value) {
            // 代表项目照片
            if (Number(this.representAcreageList.length) > 0) {
                layer.msg('代表项目照片不能保存多张')
                return
            }
            savePhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.$message('上传成功')
                    this.photoFlg = 0
                    // this.findPhotoByUid()
                    // this.setUpdatePlate()
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 代表项目照片回显
        findPhotoByUid () {
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 51 // 代表项目照片
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.representAcreageList = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    }
}
</script>
<style  scoped>
    .imgbox {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
